import React, { useState } from 'react'

interface IProps {
  name: string;
}
/**
 * @title radio 单选框
 * @param props 
 */
export default function GmRadio(props:IProps) {
  const {name='name'} = props;
  const [isChecked, setChecked] = useState<boolean>(false);
  const handleCheck = (e:any) => {
    console.log(e)
    setChecked(!isChecked)
  }

  return (
    <div className="gm-radio">
      <input type="radio" id={name} value={1} onChange={handleCheck} />
      <label htmlFor={name}>Awesome</label>
      <input type="radio" id={name+'1'} value={2} onChange={handleCheck} />
      <label htmlFor={name+'1'}>Awesome</label>
      <style jsx>{`
        /* 隐藏 input[type="radio"] -- 原理label绑定了input */
        .gm-radio input[type="radio"] {
          position: absolute;
          clip: rect(0, 0, 0, 0);
        }
        input[type="radio"] + label {
          display: inline-block;
          height: 12px;
          line-height: 12px;
          /* 小写英文开头 */
          /* line-height: 10px; */
          cursor: pointer;
          position: relative;
          user-select: none;
        }
        input[type="radio"]:disabled + label {
          cursor: not-allowed;
          color: #999;
        }
        input[type="radio"] + label::before {
          content: "";
          display: inline-block;
          width: 10px; height: 10px;
          border-radius: 8px;
          /* vertical-align: top; */
          margin-right: .4em;
          border: 1px solid #ccc;
          background-color: #fff;
          transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
        }
        input[type="radio"]:not(:disabled) + label:hover::before {
          border-color: #b4a078;
        }
        input[type="radio"]:checked + label::before {
          border-color: #b4a078 !important;
          background-color: #b4a078;
        }
        input[type="radio"] + label::after {
          content: "";
          display: inline-block;
          width: 4px; height: 4px;
          background-color: #fff;
          border-radius: 4px;
          position: absolute;
          left: 3px; top: 58%;
          transform: translateY(-50%) scale(0);
          transition: transform .2s ease-in-out;
        }
        input[type="radio"]:checked + label::after {
          transform: translateY(-50%) scale(1);
          transition: transform .2s ease-in-out;
        }
        input[type="radio"]:disabled + label::before,
        input[type="radio"]:disabled.checked + label::before {
          background-color: #f2f2f2;
        }
        input[type="radio"]:disabled.checked + label::after {
          border-color: #ccc;
          background-color: #ccc;
          transform: translateY(-50%) scale(1);
        }
      `}</style>
    </div>
  )
}
